<template>
  <div>
    <c-r-m-list-head title="工单库" placeholder="请输入订单名称" @on-search="crmSearch" :crm-type="crmType" />
    <div v-empty="!crm.wo.index" xs-empty-icon="nopermission" xs-empty-text="暂无权限" class="crm-container">
      <c-r-m-table-head ref="crmTableHead" crm-type="contract" type="wo" :isSeas="true" @filter="handleFilter"
        @handle="handleHandle" @scene="handleScene"></c-r-m-table-head>
      <el-table class="n-table--border" id="crm-table" v-loading="loading" :data="list" :height="tableHeight" stripe
        border highlight-current-row style="width: 100%" :cell-style="cellStyle" @row-click="handleRowClick"
        @header-dragend="handleHeaderDragend" @selection-change="handleSelectionChange">
        <el-table-column show-overflow-tooltip type="selection" align="center" width="55" :selectable="handleSelectable">
        </el-table-column>
        <el-table-column v-for="(item, index) in fieldList" :key="index" show-overflow-tooltip :fixed="index == 0"
          :prop="item.prop" :label="item.label" :width="item.width" :formatter="fieldFormatter">
          <template slot="header" slot-scope="scope">
            <div class="table-head-name">{{ scope.column.label }}</div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="check_status_info" label="操作" :resizable="false" width="140"
          align="center" fixed="right">
          <template slot="header" slot-scope="scope">
            <div class="table-head-name">{{ scope.column.label }}</div>
          </template>
          <template slot-scope="scope">
            <div class="status_button" :style="getStatusStyle('1')" style="cursor: pointer;"
              @click="handleDivided(scope.row.contract_id,'分配外勤')" v-if="assign&&scope.row.crm_wvgjii != '转换记账'">
              分配
            </div>
            <div class="status_button toPull" v-if="roam&&scope.row.is_accounting == 0&&scope.row.crm_wvgjii == '转换记账'"
              :style="getStatusStyle('1')" @click="handlePull(scope.row)">
              流转
            </div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="state_info" label="状态" :resizable="false" width="120"
          align="center" fixed="right">
          <template slot="header" slot-scope="scope">
            <div class="table-head-name">{{ scope.column.label }}</div>
          </template>
          <template slot-scope="scope">
            <div class="status_button" :style="getStatusStyle(scope.row.check_status)">
              {{ scope.row.state_info }}
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="36">
          <template slot="header" slot-scope="slot">
            <img src="@/assets/img/t_set.png" @click="handleTableSet" class="table-set" />
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <span class="money-bar">
          订单总金额：{{ moneyPageData.sumMoney }} / 已回款金额：{{
            moneyPageData.unReceivablesMoney
          }}
        </span>
        <el-pagination class="p-bar" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="pageSizes" :page-size.sync="pageSize"
          layout="slot, total, sizes, prev, pager, next, jumper" :total="total" />
      </div>
    </div>
    <!-- 相关详情页面 -->
    <c-r-m-all-detail :visible.sync="showDview" :crmType="rowType" :id="rowID" @handle="handleHandle" class="d-view">
    </c-r-m-all-detail>
    <fields-set :crmType="crmType" @set-success="setSave" :dialogVisible.sync="showFieldSet"></fields-set>
    <teams-handle :crmType="crmType" :title="teamsTitle" :selectionList="selectionList" @handle="handleCallBack"
      :contractId="contractId" :dialogVisible.sync="teamsDialogShow"></teams-handle>
  </div>
</template>

<script>
  import CRMAllDetail from "@/views/customermanagement/components/CRMAllDetail";
  import table from "../mixins/table";
  import {
    adminIndexAuthList
  } from '@/api/common'
  import {
    roam
  } from "@/api/customermanagement/confirmation";
  import TeamsHandle from "@/views/customermanagement/components/selectAccounting/TeamsHandle";

  export default {
    /** 客户管理 的 订单列表 */
    name: "woIndex",
    components: {
      CRMAllDetail,
      TeamsHandle
    },
    mixins: [table],
    data() {
      return {
        crmType: "wo",
        moneyData: null, //订单列表金额
        isSeas: true,
        roam: false,
        teamsDialogShow: false,
        teamsTitle: '',
        contractId: '',
        assign: false
      };
    },
    computed: {
      moneyPageData() {
        // 未勾选展示订单总金额信息
        if (this.selectionList.length == 0 && this.moneyData) {
          return this.moneyData;
        } else {
          let sumMoney = 0.0;
          let unReceivablesMoney = 0.0;
          for (let index = 0; index < this.selectionList.length; index++) {
            const element = this.selectionList[index];
            // 2 审核通过的订单
            if (element.check_status == 2) {
              sumMoney += parseFloat(element.money);
              unReceivablesMoney += parseFloat(element.unMoney);
            }
          }
          return {
            sumMoney: sumMoney.toFixed(2),
            unReceivablesMoney: unReceivablesMoney.toFixed(2),
          };
        }
      },
    },
    created() {
      this.getAuth()
    },
    mounted() {},
    methods: {
      handleSelectable(row, index) {
        if (row.butler_id == '') {
          return true;
        }else{
            return false;
        }
        
      },
      // 子组件 回调的 结果
      handleCallBack(data) {
        this.$emit("handle", {
          type: data.type
        });
      },
      handleDivided(id, type) {
        this.contractId = id.toString()
        this.teamsTitle = type;
        this.teamsDialogShow = true;
      },
      // 删除确认函
      handlePull(row) {
        this.$confirm("确认流转该工单吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            roam({
              contract_id: row.contract_id
            }).then((res) => {
              this.$message.success(res.data);
              this.getList();
            });
          })
          .catch(() => {});
      },

      // 获取权限
      getAuth() {
        return new Promise((resolve, reject) => {
          adminIndexAuthList().then((response) => {
            const data = response.data
            this.roam = data.crm.wo?data.crm.wo.roam:false
            this.assign = data.crm.contract?data.crm.contract.assign:false
            resolve(response)
          }).catch(error => {
            reject(error)
          })
        })
      },
      /** 通过回调控制style */
      cellStyle({
        row,
        column,
        rowIndex,
        columnIndex
      }) {

        if (
          column.property === "num" ||
          column.property === "customer_id" ||
          column.property === "business_id" ||
          column.property === "contacts_id"
        ) {
          return {
            color: "#3E84E9",
            cursor: "pointer"
          };
        } else {
          return "";
        }
      },
    },
  };

</script>

<style lang="scss" scoped>
  @import "../styles/table.scss";

  .money-bar {
    color: #99a9bf;
    line-height: 44px !important;
    position: absolute;
    left: 20px;
    top: 0;
  }

  .toPull {
    cursor: pointer
  }

</style>
